<!--
* @Component: 
* @Maintainer: J.K. Yang
* @Description: 
-->
<script setup lang="ts">
import configs from "@/configs";
import MainMenu from "~/components/navigation/MainMenu.vue";
import Logo from "~/components/icons/logo.vue";
// import { Icon } from "@iconify/vue";
const customizeTheme = useCustomizeThemeStore();
const navigation = ref(configs.navigation);


onMounted(() => {
  scrollToBottom();
});

const scrollToBottom = () => {
  const contentArea = document.querySelector(".v-navigation-drawer__content");
  const activeItem = document.querySelector(
    ".v-list-item--active"
  ) as HTMLElement;

  setTimeout(() => {
    contentArea?.scrollTo({
      top: activeItem?.offsetTop,
    });
  }, 100);
};
//微信客服
const service=()=>{
  const service_url=useGlobalConfig.APP.pages.service_url
  window.open(service_url)
}

const {appPageContent,isCommercial} =storeToRefs(useAppStore())
</script>

<template>
  <v-navigation-drawer :rail="customizeTheme.miniSidebar" elevation="1" v-model="customizeTheme.mainSidebar" id="mainMenu">
    <!-- ---------------------------------------------- -->
    <!---Top Area -->
    <!-- ---------------------------------------------- -->
    <template v-if="!customizeTheme.miniSidebar" v-slot:prepend>
      <v-card
        style="box-shadow: rgba(0, 0, 0, 0.05) 0px 25px 15px -20px"
        height="100"
        class="d-flex align-center justify-center"
      >
        <img
          v-if="customizeTheme.darkTheme"
          width="200"
          :src="appPageContent.home_logo_dark"
          alt=""
        />
        <img
          v-else
          width="200"
          :src="appPageContent.home_logo_light"
          alt=""
        />
      </v-card>
      <v-divider/>
    </template>

    <!-- ---------------------------------------------- -->
    <!---Nav List -->
    <!-- ---------------------------------------------- -->

    <main-menu :menu="navigation.menu"/>
    
    <!-- ---------------------------------------------- -->
    <!---Bottom Area -->
    <!-- ---------------------------------------------- -->
    <template v-if="!customizeTheme.miniSidebar && appPageContent.mainSlider_serviceCard_show" v-slot:append>
      <v-card
        theme="dark"
        height="225"
        class="pa-3"
        variant="text"
        style="box-shadow: rgba(0, 0, 0, 0.05) 0px -25px 15px -20px"
      >
        <v-card
          class="d-flex flex-column gradient pa-2"
          color="primary"
          :class="customizeTheme.primaryColor.colorName"
          height="200"
        >
          <v-card-title>

            博璀<logo/>
            <v-spacer/>
            <v-chip size="x-small" color="white">{{isCommercial?'商用许可':'个人许可'}}</v-chip>
          </v-card-title>
          <v-card-subtitle>AI商用落地无代码解决方案</v-card-subtitle>
          <v-card-text>
            <div><b>官网</b></div>
            <div>
              <a :href="useGlobalConfig.APP.pages.homepage_url">{{ useGlobalConfig.APP.pages.homepage_url }}</a>
              </div>
          </v-card-text>
          <v-card-actions>
            <v-btn
              color="white"
              block
              prepend-icon="mdi-face-agent"
              variant="elevated"
              @click="service"
            >
              获取帮助
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-card>
    </template>
  </v-navigation-drawer>
</template>

<style scoped lang="scss"></style>
